<template>
	<view class="shop">
		<view class="item" v-for="item in list" :key="item.name">
			<text>{{item.name}}</text>
			<text>{{item.price}}</text>
			<view class=""><u-button size="mini" @click="()=>add(item)">加入购物车</u-button></view>
		</view>
		<view class="shopCar">
			<view class="list" v-if="getShopCar.length > 0">
				<view class="item" v-for="(item,index) in getShopCar" :key="item.name + index">
					<text>{{index+1}}</text>
					<text>{{item.name}}</text>
					<text>{{item.price}}</text>
					<view class=""><u-button size="mini" @click="()=>openShopInfo(item)">查看详情</u-button></view>
					<view class=""><u-button size="mini" @click="()=>remove(index)">移除</u-button></view>
				</view>
				<view class="price">
					<text>价格:{{totalPrice}}</text>
				</view>
			</view>
			<view class="noDate" v-else>
				<text>购物车没有商品</text>
			</view>
		</view>
	</view>
</template>

<script>
	import {mapGetters,mapMutations} from 'vuex'
	export default {
		data() {
			return {
				list: [
					{
						name:'裤子',
						price:131
					},
					{
						name:'衣服',
						price:132
					},
				],
				// shop: []
			}
		},
		methods: {
			...mapMutations(['mutShopCar','removeShopCar','mutShopInfo']),
			add (item) {
				
				this.mutShopCar(item)
			},
			remove (index) {
				this.removeShopCar(index)
			},
			openShopInfo (item) {
				let {name,price} = item
				this.mutShopInfo({name,price})
				uni.navigateTo({
					url: '/A/info/info'
				})
			}
		},
		computed:{
			...mapGetters(['getShopCar','totalPrice']),
			
		}
	}
</script>

<style lang="scss">
	.shop {
		.item {
			display: flex;
		}
		.shopCar {
			border: 2rpx solid #007AFF;
		}
	}
</style>
